Google Charts API একটি শক্তিশালী JavaScript লাইব্রেরি যা ডেটা ভিজুয়ালাইজেশন এবং চার্ট তৈরির জন্য ব্যবহৃত হয়। এটি ওয়েব অ্যাপ্লিকেশনগুলোর জন্য অত্যন্ত জনপ্রিয় একটি টুল যা সহজে ডাইনামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সাহায্য করে। Google Charts API ব্যবহার করে বিভিন্ন ধরনের চার্ট, গ্রাফ এবং ডেটা ভিজুয়ালাইজেশন তৈরি করা সম্ভব, যা ওয়েব পেজে সহজে ইন্টিগ্রেট করা যায়।
Google Charts API বিভিন্ন ধরনের চার্ট সমর্থন করে, যার মধ্যে রয়েছে:
Google Charts API এ চার্ট এবং গ্রাফের জন্য বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে:
Google Charts API ইন্টারঅ্যাকটিভ ফিচার যেমন:
Google Charts API বিভিন্ন ধরনের ডেটা সোর্সের সাথে ইন্টিগ্রেট করা যায়, যেমন:
Google Charts API ক্লাউড পরিবেশে ব্যবহৃত হতে পারে, যা অনেক বড় ডেটার সাথে কাজ করার সময় সাহায্য করে।
Google Charts API এর চার্টগুলি রেসপনসিভ, অর্থাৎ এটি মোবাইল এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়। এটির সাহায্যে আপনি সহজেই ডিভাইসের আকার অনুযায়ী চার্ট কাস্টমাইজ করতে পারেন।
Google Charts API সাধারণত একটি স্নিপেট কোড হিসেবে ব্যবহার করা হয়, যা HTML পেজে অন্তর্ভুক্ত করা হয়। এটি JavaScript এর মাধ্যমে ডেটা প্রসেস করে এবং একে একটি চার্টে রেন্ডার করে।
প্রথমে, Google Charts API স্ক্রিপ্ট লোড করতে হয়:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এরপর, JavaScript কোডে Google Charts লোড এবং ইনিশিয়ালাইজ করা হয়:
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
এখানে drawChart() ফাংশনে একটি পাই চার্ট তৈরি করা হয়েছে এবং ডেটার জন্য arrayToDataTable() ব্যবহার করা হয়েছে। তারপর, google.visualization.PieChart() ফাংশনের মাধ্যমে চার্টটি তৈরি করা হয়েছে এবং HTML ডিভে এটি রেন্ডার করা হয়েছে।
HTML টেমপ্লেটে চার্ট রেন্ডার করার জন্য:
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
Google Charts API একটি অত্যন্ত শক্তিশালী এবং ব্যবহারকারী-বান্ধব টুল যা ওয়েব অ্যাপ্লিকেশনগুলোর জন্য ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়তা করে। এটি বিভিন্ন ধরনের চার্ট তৈরির সুবিধা দেয় এবং ডেটা সোর্সের সাথে ইন্টিগ্রেশন এবং কাস্টমাইজেশন সহজ করে তোলে। Google Charts API-র সাহায্যে আপনি আপনার অ্যাপ্লিকেশনে আকর্ষণীয়, ইন্টারঅ্যাকটিভ এবং ডাইনামিক ডেটা ভিজুয়ালাইজেশন সহজে তৈরি করতে পারেন।
Google Charts API একটি JavaScript লাইব্রেরি যা ওয়েব অ্যাপ্লিকেশনগুলোর জন্য ডেটা ভিজুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এটি ডাইনামিক, ইন্টারঅ্যাকটিভ, এবং কাস্টমাইজড চার্ট তৈরি করার জন্য ব্যবহৃত হয়, যেগুলি সহজে ওয়েব পেজে ইনক্লুড করা যায়। Google Charts API ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যেমন পাই চার্ট, কলাম চার্ট, লাইন চার্ট, বারে চার্ট, স্ক্যাটার প্লট এবং আরও অনেক।
Google Charts API ব্যবহার করতে প্রথমে Google Charts Loader লোড করতে হয়, তারপর JavaScript কোডের মাধ্যমে চার্ট তৈরি করতে হয়। এখানে একটি সাধারণ উদাহরণ দেওয়া হলো:
প্রথমে আপনার HTML ফাইলে Google Charts API স্ক্রিপ্ট লোড করুন:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
JavaScript কোডে Google Charts API লোড এবং চার্ট তৈরি করার জন্য নিচের কোডটি ব্যবহার করুন:
google.charts.load('current', {'packages':['corechart', 'bar']}); // Google Charts লোড করা
google.charts.setOnLoadCallback(drawChart); // চার্ট তৈরি করার জন্য ফাংশন কল
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]); // ডেটা তৈরি
var options = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut চার্টের জন্য
width: 600,
height: 400
}; // চার্টের অপশন
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); // PieChart তৈরি করা
chart.draw(data, options); // চার্ট রেন্ডার করা
}
এখন, HTML ফাইলে একটি ডিভ তৈরি করুন যেখানে চার্টটি রেন্ডার হবে:
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
এখানে, piechart_3d হল সেই ডিভের আইডি যেখানে চার্টটি প্রদর্শিত হবে।
1. Data Visualization (ডেটা ভিজুয়ালাইজেশন)
Google Charts API ব্যবহার করে বিভিন্ন ধরনের ডেটার জন্য আকর্ষণীয় চার্ট তৈরি করা যায়। যেমন:
2. ডাইনামিক চার্ট তৈরি
Google Charts API-এর সাহায্যে ডেটা রিয়েল-টাইমে পরিবর্তিত হলে চার্টও আপডেট হতে পারে। উদাহরণস্বরূপ:
3. ইউজার ইন্টারঅ্যাকশন
Google Charts API ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়তা করে:
4. ডেস্কটপ এবং মোবাইল রেসপনসিভ চার্ট
Google Charts API রেসপনসিভ চার্ট তৈরি করতে সহায়তা করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়।
Google Charts API একটি শক্তিশালী এবং সহজে ব্যবহৃত JavaScript লাইব্রেরি যা ওয়েব অ্যাপ্লিকেশনের জন্য ডেটা ভিজুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরনের চার্ট এবং ইন্টারঅ্যাকটিভ ফিচার প্রদান করে, যা ডেটাকে আকর্ষণীয় এবং সহজে বোঝার উপযোগী করে তোলে। Google Charts API ব্যবহার করে আপনি সহজেই ডাইনামিক, কাস্টমাইজড এবং রেসপনসিভ চার্ট তৈরি করতে পারবেন।
Google Charts API ব্যবহার করে অনেক ধরনের চার্ট তৈরি করা যায় যা ডেটা ভিজুয়ালাইজেশনে সহায়তা করে। এখানে জনপ্রিয় চার্ট টাইপগুলোর কিছু উদাহরণ দেওয়া হলো: Line Chart, Bar Chart, Pie Chart, Area Chart, এবং আরও অনেক। প্রতিটি চার্ট ডেটার বিভিন্ন দিক তুলে ধরতে এবং ইউজারের ইন্টারঅ্যাকশন নিশ্চিত করতে ব্যবহৃত হয়।
Line Chart সাধারণত সময়ের সাথে পরিবর্তনশীল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি পয়েন্টগুলির মধ্যে লাইন তৈরি করে ডেটার প্রবণতা বা প্যাটার্ন তুলে ধরে।
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2010', 1000],
['2011', 1170],
['2012', 660],
['2013', 1030]
]);
var options = {
title: 'Company Sales Growth',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
HTML:
<div id="line_chart" style="width: 900px; height: 500px;"></div>
Bar Chart সাধারণত তুলনা করার জন্য ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি বা ভ্যালু বার আকারে উপস্থাপিত হয়। এটি ডেটার তুলনা সরাসরি দেখানোর জন্য উপযুক্ত।
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', '2020', '2021'],
['Shirts', 1000, 1200],
['Pants', 600, 800],
['Shoes', 300, 350]
]);
var options = {
chart: {
title: 'Sales Comparison',
subtitle: 'Yearly Product Sales',
},
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
HTML:
<div id="bar_chart" style="width: 900px; height: 500px;"></div>
Pie Chart একটি সার্কুলার চার্ট যেখানে ডেটার অংশগুলি ভগ্নাংশ আকারে উপস্থাপিত হয়। এটি সাধারণত শতাংশ বা পোর্টফোলিও দেখানোর জন্য ব্যবহৃত হয়।
google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
HTML:
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
Area Chart একটি লাইন চার্টের মতো, তবে এখানে লাইনটি পূর্ণ জায়গা রঙিন করে দেয়া হয়, যা সময়ের সাথে ডেটার পরিমাণ বা ভলিউম প্রদর্শন করে। এটি সাধারণত ট্রেন্ড এবং ভলিউম দেখানোর জন্য ব্যবহার করা হয়।
google.charts.load('current', {'packages':['corechart', 'area']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2010', 1000, 400],
['2011', 1170, 460],
['2012', 660, 1120],
['2013', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Amount' },
isStacked: true
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
HTML:
<div id="area_chart" style="width: 900px; height: 500px;"></div>
Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে, যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়। এটি ডেটার বিভিন্ন দিক একসাথে তুলনা করতে সাহায্য করে।
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales', 'Profit'],
['Jan', 1000, 400],
['Feb', 1170, 460],
['Mar', 660, 1120],
['Apr', 1030, 540]
]);
var options = {
title: 'Sales and Profit Comparison',
vAxis: { title: 'Amount' },
hAxis: { title: 'Month' },
seriesType: 'bars',
series: { 1: { type: 'line' } }
};
var chart = new google.visualization.ComboChart(document.getElementById('combo_chart'));
chart.draw(data, options);
}
HTML:
<div id="combo_chart" style="width: 900px; height: 500px;"></div>
Bubble Chart একটি বিশেষ ধরনের চার্ট যেখানে প্রতিটি বুদ্বুদ একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং এর আকার বা রঙ ভিন্ন ভিন্ন ডেটা বা পরিমাপ দেখাতে ব্যবহৃত হয়। এটি তিনটি ভেরিয়েবল একসাথে প্রদর্শন করতে সক্ষম।
google.charts.load('current', {'packages':['corechart', 'bubble']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area', 'Density'],
['New York', 8175133, 302.9, 27000],
['Los Angeles', 3792621, 468.7, 8100],
['Chicago', 2695598, 227.6, 11800],
['Houston', 2129784, 599.6, 3500],
['Phoenix', 1445632, 517.6, 2800]
]);
var options = {
title: 'City Population and Area',
chartArea: {width: '50%'},
hAxis: {
title: 'Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
HTML:
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
Google Charts API বিভিন্ন ধরনের চার্ট তৈরি করার জন্য ব্যবহৃত হয়, যেমন Line Chart, Bar Chart, Pie Chart, Area Chart, Combo Chart, এবং Bubble Chart। প্রতিটি চার্ট ডেটার ভিন্ন ভিন্ন দিক উপস্থাপন করতে সক্ষম এবং তা বিশ্লেষণ করতে সহায়তা করে। Google Charts API সহজেই ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ইন্টিগ্রেট করা যায় এবং বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করতে সাহায্য করে।
Angular অ্যাপ্লিকেশনে Google Charts ইন্টিগ্রেট করার জন্য angular-google-charts লাইব্রেরি ব্যবহার করা হয়। এটি Angular-এ Google Charts API এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন সহজে তৈরি করতে সহায়তা করে। নিচে ধাপে ধাপে Google Charts কনফিগার করার প্রক্রিয়া বর্ণনা করা হলো।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন অথবা যদি আপনার একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন।
ng new google-charts-angular
cd google-charts-angular
Google Charts লাইব্রেরি Angular অ্যাপে ব্যবহার করার জন্য angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি করতে:
npm install angular-google-charts
এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, GoogleChartsModule কে Angular অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিম্নলিখিত কোডটি যোগ করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আপনি আপনার Angular কম্পোনেন্টে Google Charts ব্যবহার করতে পারেন। চলুন একটি পাই চার্টের উদাহরণ দেখি।
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts with Angular';
chartType = 'PieChart'; // চার্টের ধরন
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // চার্টের ডেটা
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut চার্টের জন্য
width: 600,
height: 400
}; // চার্টের অপশন
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, আমরা একটি Pie Chart ব্যবহার করেছি, তবে আপনি আপনার প্রয়োজন অনুযায়ী Bar Chart, Line Chart, Column Chart, ইত্যাদি ব্যবহার করতে পারেন।
এখন, Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন।
Google Charts-এর অপশনগুলি ব্যবহার করে আপনি চার্ট কাস্টমাইজ করতে পারেন:
চার্টের ধরন নির্ধারণ করুন, যেমন 'PieChart', 'BarChart', 'LineChart' ইত্যাদি।
ডেটার পরিবর্তন করতে chartData অবজেক্টটি কাস্টমাইজ করুন। উদাহরণস্বরূপ:
chartData = [
['City', 'Population'],
['New York', 8175133],
['Los Angeles', 3792621],
['Chicago', 2695598]
];
Chart এর অপশন কাস্টমাইজ করতে chartOptions ব্যবহার করুন। কিছু জনপ্রিয় অপশন:
chartOptions = {
title: 'City Population',
is3D: true,
colors: ['#4285F4', '#DB4437', '#0F9D58'],
legend: { position: 'top' }
};
Angular এর মাধ্যমে Google Charts কনফিগার করার জন্য angular-google-charts লাইব্রেরি ইন্সটল করা হয়, যা Google Charts API কে Angular অ্যাপ্লিকেশনে ব্যবহারের সুবিধা প্রদান করে। আপনি সহজেই বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা, অপশন এবং কাস্টমাইজেশন দিয়ে তা নিয়ন্ত্রণ করতে পারেন। Google Charts এর সাহায্যে আপনি ইন্টারঅ্যাকটিভ, ডাইনামিক এবং আকর্ষণীয় ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।
Google Charts API তে ChartOptions একটি অত্যন্ত গুরুত্বপূর্ণ অংশ যা চার্টের বিভিন্ন সেটিংস কাস্টমাইজ করতে ব্যবহৃত হয়। এই ChartOptions এর মাধ্যমে চার্টের টাইটেল, আকার, রঙ, লেজেন্ড, অক্ষর (axis) এবং অন্যান্য অনেক বৈশিষ্ট্য কাস্টমাইজ করা যায়।
Google Charts API তে ব্যবহৃত কিছু গুরুত্বপূর্ণ ChartOptions এর মধ্যে উল্লেখযোগ্য:
চার্টের উপরের অংশে প্রদর্শিত টাইটেল কাস্টমাইজ করা যায়।
chartOptions = {
title: 'My Daily Activities',
};
চার্টের আকার কাস্টমাইজ করা যায়। ডিফল্ট আকার ব্যবহার করা হলেও এখানে নির্দিষ্ট আকার দেওয়া যেতে পারে।
chartOptions = {
width: 600,
height: 400
};
চার্টের লেজেন্ডের পজিশন এবং অন্যান্য স্টাইল কাস্টমাইজ করা যেতে পারে। legend অপশনে আপনি লেজেন্ডের অবস্থান পরিবর্তন করতে পারেন।
chartOptions = {
legend: { position: 'top' }
};
বিভিন্ন position ভ্যালু হতে পারে: 'top', 'bottom', 'left', 'right'।
চার্টের রঙ পরিবর্তন করতে colors অপশন ব্যবহার করা হয়। এখানে আপনি একটি অ্যারে ব্যবহার করে বিভিন্ন রঙের সেট দিতে পারেন।
chartOptions = {
colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853']
};
আপনি যদি 3D চার্ট তৈরি করতে চান, তাহলে is3D অপশন ব্যবহার করতে হবে। এটি সাধারণত PieChart, ColumnChart, BarChart ইত্যাদি চার্টে ব্যবহার করা হয়।
chartOptions = {
is3D: true
};
Pie Chart এর জন্য Doughnut (ডোঘনাট) স্টাইল তৈরি করার জন্য pieHole ব্যবহার করা হয়।
chartOptions = {
pieHole: 0.4 // 0.4 মানে গর্তের আকার হবে 40%
};
hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল এবং অন্যান্য সেটিংস পরিবর্তন করতে পারেন।
chartOptions = {
hAxis: {
title: 'Time',
minValue: 0
},
vAxis: {
title: 'Sales'
}
};
Line Chart এ লাইনটি সোজা না হয়ে কিউর্ভে থাকবে, এটা নির্ধারণ করতে curveType অপশন ব্যবহার করা হয়।
chartOptions = {
curveType: 'function' // এটি লাইন চার্টে কিউর্ভ তৈরি করে
};
চার্টে এনিমেশন অ্যাড করতে animation অপশন ব্যবহার করা যায়। এটি চার্টের প্রদর্শনকে আরও আকর্ষণীয় করে তোলে।
chartOptions = {
animation: {
startup: true,
easing: 'inAndOut',
duration: 1000
}
};
'inAndOut', 'linear' ইত্যাদি)চার্টের পয়েন্টগুলোর উপর হোভার করলে টুলটিপ প্রদর্শিত হয়। tooltip অপশন দিয়ে আপনি টুলটিপের স্টাইল এবং কন্টেন্ট কাস্টমাইজ করতে পারেন।
chartOptions = {
tooltip: { trigger: 'focus' }
};
এখানে, trigger অপশন দিয়ে আপনি নির্ধারণ করতে পারেন যে টুলটিপ কখন এবং কীভাবে প্রদর্শিত হবে। ('focus', 'selection' ইত্যাদি)
এখন আমরা একটি সম্পূর্ণ উদাহরণ দেখি যেখানে আমরা বিভিন্ন ChartOptions ব্যবহার করেছি।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Customized Google Pie Chart';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
pieHole: 0.4, // Doughnut Style
colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'], // Custom Colors
legend: { position: 'top' }, // Legend Position
is3D: true, // 3D Effect
animation: { // Animation
startup: true,
easing: 'inAndOut',
duration: 1000
},
tooltip: { trigger: 'focus' } // Tooltip Behavior
};
}
app.component.html):<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, আমরা একটি Pie Chart তৈরি করেছি যা 3D, Doughnut স্টাইল, কাস্টমাইজড রঙ এবং এনিমেশনসহ প্রদর্শিত হবে।
ChartOptions ব্যবহার করে আপনি Google Charts এর বিভিন্ন সেটিংস এবং স্টাইল কাস্টমাইজ করতে পারেন। এটি চার্টের উপস্থাপনাকে আপনার প্রয়োজন অনুসারে সাজাতে সাহায্য করে। আপনি রঙ, আকার, টাইটেল, লেজেন্ড, এনিমেশন, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনার ডেটা ভিজুয়ালাইজেশন আরও আকর্ষণীয় এবং কার্যকরী হয়ে ওঠে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
